/**
 * @name        hookProgress.ts
 * @author      shenyc
 * @date        2020-05-06 - ?
 * @copyright   Copy right (c) shenyc (shenyczz@163.com).
 *              All rights reserved.
 *
 ******************************************************************************/
// {{@@@}}
"use strict"
// ----------------------------------------------------------------------------
import { nextTick, unref } from "vue"
import { useCssVar } from "@vueuse/core"
import { default as nprogress, type NProgressOptions } from "nprogress"
import "nprogress/nprogress.css"
// ----------------------------------------------------------------------------
/**
 * 进度条
 * @returns Object { start, done }
 */
export const hookProgress = () => {
    // const nprogress = NProgress;
    const primaryColor = useCssVar("--el-color-primary", document.documentElement)
    const nprogressOptions: Partial<NProgressOptions> = {
        easing: "ease", // 动画方式
        minimum: 0.3, // 初始化时的最小百分比
        showSpinner: true, // 是否显示加载 ico 动画
        // speed: 500,         // 递增进度条的速度
        // trickleSpeed: 200,  // 自动递增间隔
        // template: string;
        // trickle: boolean;
        // parent: string;
        // positionUsing: string;
        // barSelector: string;
        // spinnerSelector: string;
    }
    nprogress.configure(nprogressOptions)

    const initColor = async () => {
        await nextTick()
        const bar = document.getElementById("nprogress")?.getElementsByClassName("bar")[0] as ElementRef
        if (bar) {
            bar.style!.background = unref(primaryColor.value) as string
        }
    }

    initColor()

    const start = () => {
        nprogress.start()
    }

    const done = () => {
        nprogress.done()
    }

    return { start, done }
}

export default hookProgress
// ----------------------------------------------------------------------------
// {{@@@}}
